<template>
  <div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <h1>{{ 'Test Connect' }}</h1>

    <div>&nbsp;</div>
    <button @click="onclick"><H1>Connect</H1></button>

    <h2>--请求信息---</h2>
    <h4>--header---</h4>
    {{ config.headers }}
    <h4>--url---</h4>
    {{ config.url }}
    <h4>--method---</h4>
    {{ config.method }}
    <h4>--data---</h4>
    {{ config.data }}

    <h2>--response 响应信息---</h2>
    <!-- <p>响应返回的结果</p>
    {{ response }} -->

    <h2>--response.status---</h2>
    {{ response.status }}
    <h2>--response.statusText---</h2>
    {{ response.statusText }}
    <h2>--response.headers---</h2>
    {{ response.headers }}

    <h2>--response.data---JsonRpc 的结构----</h2>
    {{ data }}

    <h2>--response.data.result---</h2>
    {{ result }}
    <h2>--response.data.result.server_version---</h2>
    {{ result.server_version }}

    <div>&nbsp;</div>
    <button @click="onclickLogin"><H1>Login</H1></button>

    <h2>--请求信息---</h2>
    <h4>--header---</h4>
    {{ config.headers }}
    <h4>--url---</h4>
    {{ config.url }}
    <h4>--method---</h4>
    {{ config.method }}
    <h4>--data---</h4>
    {{ config.data }}

    <h2>--response 响应信息---</h2>
    <!-- <p>响应返回的结果</p>
    {{ response }} -->

    <h2>--response.status---</h2>
    {{ response.status }}
    <h2>--response.statusText---</h2>
    {{ response.statusText }}
    <h2>--response.headers---</h2>
    {{ response.headers }}

    <h2>--response.data---JsonRpc 的结构----</h2>
    {{ data }}

    <!-- <h2>--response.data.error---</h2>
    {{ error }} -->

    <h2>--response.data.error.code---</h2>
    {{ error.code }}

    <h2>--response.data.error.message---</h2>
    {{ error.message }}

    <h2>--response.data.error.data.name---</h2>
    {{ error.data.name }}

    <h2>--response.data.error.data.message---</h2>
    {{ error.data.message }}

    <h2>--response.data.error.data.debug---</h2>

    <div style="white-space: pre">
      {{ error.data.debug }}
    </div>

    <div>&nbsp;</div>
    <div>&nbsp;</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'TestRpc',
  props: {},
  data() {
    return {
      response: {},
      config: {},
      data: {},
      result: {},
      error: { data: {} }
    }
  },
  computed: {},

  async created() {},
  methods: {
    async request_version_info() {
      const url = '/web/webclient/version_info'
      const data = {
        jsonrpc: '2.0',
        method: 'call',
        params: {},
        id: Math.floor(Math.random() * 1000000000 + 1)
      }

      // const baseURL = 'http://192.168.56.108:8069'
      const baseURL = process.env.VUE_APP_BASE_API
      const timeout = 50000
      const service = axios.create({ baseURL, timeout })
      const response = await service({ url, method: 'post', data })
      return response
    },

    response_version_info(response) {
      this.response = response
      const { config } = response
      this.config = config

      const { data } = response
      this.data = data

      const { result } = data
      this.result = result
      this.error = { data: {} }
    },

    async onclick() {
      console.log('click btn')
      const response = await this.request_version_info()
      console.log('response:', response)
      this.response_version_info(response)
    },

    async request_authenticate() {
      const url = '/web/session/authenticate'
      const data = {
        jsonrpc: '2.0',
        method: 'call',
        params: { db: 'dbname', login: 'username', password: 'psw' },
        id: Math.floor(Math.random() * 1000000000 + 1)
      }

      // const baseURL = 'http://192.168.56.108:8069'
      const baseURL = process.env.VUE_APP_BASE_API
      const timeout = 50000
      const service = axios.create({ baseURL, timeout })
      const response = await service({ url, method: 'post', data })
      return response
    },

    response_authenticate(response) {
      this.response = response
      const { config } = response
      this.config = config

      const { data } = response
      this.data = data

      const { error } = data
      this.error = error
      this.result = {}
    },

    async onclickLogin() {
      console.log('click btn')
      const response = await this.request_authenticate()
      console.log('response:', response)

      this.response_authenticate(response)
    }
  }
}
</script>

<style scoped></style>
